草庐IT

SVG 实例

全部标签

javascript - 如何导出 ES6 类并在另一个模块中构造它的实例?

使用Node.js版本7.7.2,我想从这样的模块中定义和导出ES6类://Foo.jsclassFoo{construct(){this.bar='bar';}}module.exports=Foo;然后将该类导入另一个模块并构造该类的实例,如下所示://Bar.jsrequire('./foo');varfoo=newFoo();varfooBar=foo.bar;但是,这种语法不起作用。我尝试做的事情是否可行?如果可行,实现此目标的正确语法是什么?谢谢。 最佳答案 您必须为此使用常规Node模块语法。您的示例代码中有一些错误。

javascript - 通过变量动态实例化一个类

如何通过输入变量名来实例化一个类?在一个类中考虑这个方法:animate:function(el,build){console.log(build.effect);varanimationClass=newbuild.effect(el,build);},Build是一个包含很多东西的对象,但最重要的是“影响”。这个效果是一个独立动画类的名字——一个叫做“MarioKartMenu”。console.log(build.effect)打印出“MarioKartMenu”。但我当然得到:TypeError:表达式'build.effect'[MarioKartMenu]的结果不是构造函数

javascript - 有没有办法从元素中获取 SlickGrid 的实例

刚开始使用SlickGrid而且它似乎不像普通的jquery小部件/插件那样自行启动,您只需执行$(element).slickgrid()即可访问附加到元素的实例。有没有一种方法可以获取现有实例,而无需在创建它时明显地持有它?查看代码似乎不是这样,但不确定是否有其他人遇到过这个问题。不确定为什么他们依赖于jquery但决定进行自定义初始化。可以像将它包装在一个jqueryui小部件中一样简单。 最佳答案 您始终可以使用jQuery的数据函数来保存对光滑网格实例的引用。例如:vargrid=newSlick.Grid(contain

javascript - 如何添加点击并拖动以缩放 SVG 中的图像?

我想让访问者使用点击和拖动来缩放图像:是否有可以帮助我的JavaScript库?我注意到Raphaelhasclickanddrag方法,但我仍然需要编写大量JS来:找到图像的Angular使Angular落附近的区域可选为Angular绘制图标,使其明显可见在Angular落添加点击、拖放更新图片的尺寸我可以做到所有这些,但听起来很费时。有没有我应该使用的开源脚本?其他建议? 最佳答案 我在这篇文章中找到了这个解决方案:DraggablesandResizablesinSVG.在答案中,您可以找到一个jsfiddle链接:http

javascript - SVG - 如何将 <path> 切成两半?

我需要在javascript中的特定点切割现有路径(曲线)。例如,如果我有以下路径:据此,我可以这样得到中点:varline=document.getElementById("line_test");varlength=line.getTotalLength();varmidpoint=line.getPointAtLength(length/2);一旦我得到那个中点,我想完全删除路径的其余部分。有没有一个函数可以让我得到一个子路径?绘图库对我来说不是一个真正的选择。 最佳答案 是的,它叫做getPathSegAtLength(在路

javascript - 在 Firefox 中渲染内联 SVG

我有一个我正在开发的网站,我们允许创建形状,我们使用通过javascript构建的内联svg来创建形状。我遇到了一个奇怪的问题,svg在Chrome中正确呈现,但在Firefox中它切掉了一部分SVG。下面的代码是一个星号。在chrome中,这完美地显示出来。在Firefox中,我只能看到图像左上角的25%左右。我不确定是我们做错了什么还是Firefox有问题。有趣的是,如果我将星星变小(比如这个星星大小的1/4),它会在Firefox中完美呈现。感谢您的帮助! 最佳答案 您需要在中添加width和height属性元素。width=

javascript - 获取以屏幕像素为单位的旋转 SVG 元素的边界?

我正在尝试找到以屏幕像素为单位获取任意SVG元素边界框的最佳方法,以便正确覆盖HTML元素。到目前为止,我的方法是使用.getBBox()和.getCTM()检索对象的边界框和变换矩阵,然后将变换应用于边界框点如thisquestion的已接受答案中所述.//gettheelementvarel=$(selector)[0],pt=$(selector).closest('svg')[0].createSVGPoint();//gettheboundingboxandmatrixvarbbox=el.getBBox(),matrix=el.getScreenCTM();pt.x=bbo

javascript - d3.js 处理非 svg 浏览器

按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。d3.js开发人员如何处理无法呈现svg的浏览器?我很好奇,因为InternetExplorer9、8、7等在世界大部分关键地区拥有巨大的多数市场份额,但似乎有如此活跃的d3.js社区,就好像InternetExplorer不存在一样。D3的目的是提供灵活的数据驱动图表,因此能够以直观的方式可视化复杂的主题。因此,瞄准最时尚的技术场景并假装其他人也从他们的

javascript - 重叠 SVG 元素上的鼠标事件

如何处理重叠svg元素上的点击事件?我正在使用Reaphael.js库。问题是topDOM元素正在拦截鼠标事件,即使底部元素没有被任何绘图重叠。我的问题是如何使我的示例中的两个圆圈都可点击并仍然将它们保留在两个svg元素中?这是我的代码:CSS:#container{position:relative;width:200px;height:200px}#container>svg{position:absolute!important;top:0;left:0;}JavaScript:vartopLayer=Raphael('container',200,200);varbottomL

javascript - 在 JavaScript 中动态创建 SVG 链接

我正在从JavaScript动态创建SVG元素。它适用于像矩形这样的可视对象,但我在生成有效的xlink时遇到了问题。在下面的示例中,第一个矩形(静态定义的)在点击时可以正常工作,但其他两个(用JavaScript创建)忽略点击......即使在Chrome中检查元素似乎显示相同的结构。我见过很多类似的问题,但没有一个能准确解决这个问题。我找到的最接近的是[addingimagenamespaceinsvgthroughJSstilldoesn'tshowmethepicture]但这不起作用(如下所述)。我的目标是完全在JavaScript中完成此操作,而不依赖于JQuery或其他库